import { Button, Card, Form, Input, message, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import  type { ColumnsType } from 'antd/lib/table';
import {SearchOutlined,FormOutlined,DeleteOutlined} from "@ant-design/icons"
import { reqBatchRemoveHospitalList, reqGetHospitalSetList ,reqRemoveHospital} from '@/api/hospital/hospitalSet';
import type { HospitalSetList } from '@/api/hospital/model/hospitalSetTypes';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'antd/lib/form/Form';


export default function HospitalSet() {
    //当前页码
    let [page,setPage] = useState(1)
    // 每页展示数量
   let [limit,setLimit] = useState(5)
    //数据  总数
    let [total,setTotal] = useState(0)

    //加载状态
    let [loading,setLoading] = useState(false) 


    let [keys,setKeys] = useState<React.Key[]>([])
    //医院设置 的所有数据
     let [hospital,setHospital] = useState<HospitalSetList>([])

    //创建表单 对象  
    let [form] = useForm()

    //创建 useNavigate
    let navigate = useNavigate()

    // 创建请求医院设置列表的函数
   let getHospitalList = async function(){

    // 获取医院名字和编号
   let {hosname,hoscode} = form.getFieldsValue()
   // console.log(hoscode);

    setLoading(true)

    let result = await reqGetHospitalSetList({page,limit,hosname,hoscode})

    setLoading(false)

    setHospital(result.records)
    setTotal(result.total)
   }

    // 创建获取表单数据函数  查询医院
   let finish = ()=>{
    getHospitalList()
   }

    //清空表单搜索 数据
   let reset = ()=>{
    form.resetFields()
    getHospitalList()
   }

    // 删除一个医院信息
    let remove = (id:number)=>{
        return async ()=>{
            await reqRemoveHospital(id)
            message.success("删除成功！")

            // 重新请求初始化数据
            getHospitalList()
        }
    }    

    // 多选框操作
    let change = (selectedRowKeys:React.Key[])=>{
        setKeys(selectedRowKeys)
    }


    // 批量删除
    let removeAll = async()=>{
        await reqBatchRemoveHospitalList(keys)

        message.success("批量删除成功！")

        // 请求医院设置数据
        getHospitalList()
    }

    //初始化页面操作
    useEffect(()=>{
    getHospitalList()
    },[page,limit])

    //表格表头信息设置

    let columns:ColumnsType<any> = [{
        title: "序号",
        //三个参数  x :当前对应的单个数据  y: 当前的一行数据  index:下标
        render:(x:any,y:any,index:number)=>{
            return index+1;
        }
    },
    {
        title: "医院名称",
        dataIndex: "hosname"
    },
    {
        title: "医院编号",
        dataIndex: "hoscode"
    }, {
        title: "api基础路径",
        dataIndex: "apiUrl"
    }, {
        title: "签名",
        dataIndex: "signKey"
    }, {
        title: "联系人姓名",
        dataIndex: "contactsName"
    }, {
        title: "联系人手机号",
        dataIndex: "contactsPhone"
    }, {
        title: "操作",
        render:(row)=>{
             //当 设置 dataIndex 时,第一参数 就是 dataIndex 值
                //当 不设置 dataIndex 时,第一个参数 是当前的一行数据对象
            return <>
                <Button onClick={()=>{
                    navigate(`/syt/dashboard/hospitalSet/edit/${row.id}`)
                }} icon={<FormOutlined />} type="primary"></Button>
                <Button onClick={remove(row.id)} className='ml' danger type="primary" icon={<DeleteOutlined />}></Button>
            </>
        },
        fixed:"right",
        align:"center"
    }]
  return (
   <Card>
   
    {/* 顶部搜索 */}
    <Form
            form={form}
            layout="inline"
            name="basic"
            initialValues={{ remember: true }}
            autoComplete="off"
            onFinish={finish}
            onReset={reset}
        >
            <Form.Item
            name="hosname"
            >
            <Input placeholder='医院名称' />
            </Form.Item>

            <Form.Item
            name="hoscode"
            >
            <Input placeholder='医院编号' />
            </Form.Item>

            

            <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                查询
            </Button>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default"  htmlType="reset">
                清空
            </Button>
            </Form.Item>
        </Form>

        {/* 添加和批量删除 */}
        <div className='h-20'>
            <Button type="primary" 
            className='mr'
            onClick={()=>{
                navigate("/syt/dashboard/hospitalSet/add")
            }}
            >
                
                添加
            </Button>

            <Button
            onClick={removeAll}
            className='ml' type="default" disabled={keys.length === 0} >
                批量删除
            </Button>
        </div>

         {/* 表格数据 */}
          <Table
          loading={loading}
          rowKey={"id"}
           pagination={{
                current:page,  // 当前页码
                total:total,  //总数,
                showQuickJumper:true,  //是否快速跳转至某页
                showSizeChanger:true,  //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                pageSizeOptions:[4,6,8,10],    //指定每页可以显示多少条
                showTotal:(total)=>{   //用于显示数据总量和当前数据顺序
                    return <span>当前总数是:{total} 条</span>
                },
                onChange:(page:number, pageSize:number)=>{
                    setPage(page)
                    setLimit(pageSize)
                }

            }} 
            rowSelection={{
                type:"checkbox",
                onChange:change
            }}
            scroll={{x:"1400px"}} className='h-20' bordered
             columns={columns} dataSource={hospital} >
          </Table>


   </Card>
  )
}
